<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.id}}
        </template>
      </el-table-column>
      <el-table-column width="80" label="名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="代码" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80" label="板块">
        <template slot-scope="scope">
          {{ scope.row.bankuai }}
        </template>
      </el-table-column>
      <el-table-column width="80" label="连板频率">
        <template slot-scope="scope">
          {{ scope.row.lianBan }}
        </template>
      </el-table-column>
      <el-table-column width="80" label="压力位">
        <template slot-scope="scope">
          {{ scope.row.yaliwei}}
        </template>
      </el-table-column>
      <el-table-column width="60" label="是龙">
        <template slot-scope="scope">
          {{ scope.row.isLong=='1'?"是":"否"}}
        </template>
      </el-table-column>
      <el-table-column width="60" label="是中">
        <template slot-scope="scope">
          {{ scope.row.iszhongjunbuzhang=='1'?"是":"否"}}
        </template>
      </el-table-column>
      <el-table-column width="60" label="后排">
        <template slot-scope="scope">
          {{ scope.row.ishoubai=='1'?"是":"否"}}
        </template>
      </el-table-column>
      <el-table-column  label="交易计划">
        <template slot-scope="scope">
          {{ scope.row.jycl}}
        </template>
      </el-table-column>      
      <el-table-column width="110" label="竞价预期">
        <template slot-scope="scope">
          {{ scope.row.jjyq}}
        </template>
      </el-table-column>
      <el-table-column width="110" label="预期实现">
        <template slot-scope="scope">
          {{ scope.row.yqsx}}
        </template>
      </el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button type="text" @click="deletedAgu(scope.row.id)" size="small">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true

      axios({
          //https://www.mairui.club/hsdata.html
          method: 'get',
          url: 'http://localhost:3000/allagu',
          headers: {
              'Content-Type': 'application/json'
          }, // axios会自动将数据转换为JSON格式  
      
      })
      .then(response => {
          let res= response.data
          console.log('返回数据', res); // 处理响应数据  
          this.list = res
          this.listLoading = false
      })
      .catch(error => {
          console.error('Error:', error); // 处理错误  
      });
    },
    deletedAgu(ids){
      axios({
          //https://www.mairui.club/hsdata.html
          method: 'post',
          url: 'http://localhost:3000/deleteData',
          headers: {
              'Content-Type': 'application/json'
          }, // axios会自动将数据转换为JSON格式  
          data:{id:ids}
      })
      .then(response => {
          let res= response.data
          console.log('返回数据', res); // 处理响应数据 
          if(res.code==200){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.fetchData()
          } 
      })
      .catch(error => {
          console.error('Error:', error); // 处理错误  
      });
    }
  }
}
</script>
